<template>
  <!-- 查询条件 -->
  <div>
    羊场全称：<el-input
      style="width: 240px"
      v-model="ruleForm.farmName"
    ></el-input
    >&emsp; 负责人：<el-select v-model="ruleForm.headID" style="width: 240px">
      <el-option label="zhangsan" :value="1" />
      <el-option label="lisi" :value="2" />
    </el-select>
    &emsp;&emsp;<el-button :icon="Search" type="primary" @click="where()"
      >查询</el-button
    >
    <br />
    <el-button type="success" :icon="Plus" @click="dialogFormVisible = true"
      >新增</el-button
    >
    <el-button :icon="Delete" type="danger">删除</el-button>
  </div>

  <!-- 列表显示 -->
  <el-table
    :data="tableData"
    border
    style="max-width: 100%"
    @selection-change="handleSelectionChange"
    :header-cell-style="{
      height: '100px',
      fontSize: '15px',
      color: 'black',
      backgroundColor: 'antiquewhite',
    }"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column prop="farmId" label="序号" />
    <el-table-column prop="sheepFarmNo" label="羊场编码" />
    <el-table-column prop="farmName" label="羊场全称">
      <template #default="scope">
        <span @click="tiaozhuan(scope.row.farmId)">{{
          scope.row.farmName
        }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="sheepFarmNick" label="羊场简称" />
    <el-table-column prop="buildingDate" label="建账日期">
      <template v-slot="scope">
        <span>{{ scope.row.buildingDate.substr(0, 10) }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="headID" label="负责人">
      <template v-slot="scope">
        <span v-if="scope.row.headID == 2">lisi</span>
        <span v-if="scope.row.headID == 1">zhangsan</span>
      </template>
    </el-table-column>
    <el-table-column prop="farmAddress" label="详细地址" width="150" />
    <el-table-column prop="departmentId" label="管理部门" width="90" />
    <el-table-column prop="farmState" label="状态">
      <template v-slot="scope">
        <span v-if="scope.row.farmState == 1">启用</span>
        <span v-if="scope.row.farmState == 0">禁用</span>
      </template>
    </el-table-column>
    <el-table-column prop="createName" label="创建人" />
    <el-table-column prop="createDate" label="创建时间" width="150">
      <template v-slot="scope">
        <span>{{ scope.row.createDate.substr(0, 10) }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="updateName" label="修改人" width="150" />
    <el-table-column prop="updateDate" label="修改时间" width="130">
      <template v-slot="scope">
        <span>{{ scope.row.updateDate.substr(0, 10) }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="150">
      <template v-slot="scope">
        <el-button type="primary" :icon="Edit" circle />
        <el-button type="danger" :icon="Delete" circle />
      </template>
    </el-table-column>
  </el-table>

  <!-- 对话框新增 -->
  <el-dialog v-model="dialogFormVisible" title="羊场新增" width="500">
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="羊场全程" prop="name">
        <el-input v-model="ruleForm.farmName" placeholder="请输入羊场全程" />
      </el-form-item>
      <el-form-item label="羊场简称" prop="name">
        <el-input
          v-model="ruleForm.SheepFarmNick"
          placeholder="请输入羊场简介"
        />
      </el-form-item>
      <el-form-item label="羊场规模" prop="region">
        <el-select v-model="ruleForm.Scale" placeholder="请选择羊场规模">
          <el-option label="500只以下" :value="1" />
          <el-option label="500-1000只" :value="2" />
          <el-option label="1000-2000只" :value="3" />
          <el-option label="3000-5000只" :value="4" />
          <el-option label="5000只以上" :value="5" />
        </el-select>
      </el-form-item>
      <el-form-item label="羊场地址" prop="region"  >
        <el-select
          v-model="ruleForm.ProvinceId"
          style="width: 100px"
          @change="getcity()"clearable
        >
          <el-option
            v-for="item in province"
            :label="item.provinceName"
            :value="item.provinceId"
          />
        </el-select>
        <el-select
          v-model="ruleForm.CityId"
          style="width: 100px"
          @change="getcounty()"clearable
        >
          <el-option
            v-for="item in city"
            :label="item.cityName"
            :value="item.cityId"
          />
        </el-select>
        <el-select v-model="ruleForm.CountyId" style="width: 100px"clearable>
          <el-option
            v-for="item in county"
            :label="item.countyName"
            :value="item.countyId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="详细地址" prop="name">
        <el-input v-model="ruleForm.FarmAddress" placeholder="请输入详细地址" />
      </el-form-item>
      <el-form-item label="建账日期" prop="name">
        <el-date-picker v-model="ruleForm.BuildingDate"></el-date-picker>
      </el-form-item>
      <el-form-item label="负责人" prop="region">
        <el-select v-model="ruleForm.headID" placeholder="请选择负责人">
          <el-option label="zhangsan" :value="1" />
          <el-option label="lisi" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="管理部门">
        <el-select v-model="ruleForm.DepartmentId" placeholder="请选择管理部门">
          <el-option label="研发" :value="1" />
          <el-option label="测试" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否启用" prop="name">
        <el-radio-group v-model="ruleForm.FarmState">
          <el-radio :value="1">启用</el-radio>
          <el-radio :value="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer" align="center">
        <el-button
          :icon="Refresh"
          type="primary"
          @click="dialogFormVisible = false"
          >取消</el-button
        >
        <el-button
          :icon="SuccessFilled"
          type="success"
          @click="submitForm(ruleFormRef)"
        >
          添加
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-pagination
    v-model:current-page="page.pageIndex"
    v-model:page-size="page.pageSize"
    :page-sizes="[5, 10, 15, 20]"
    :background="true"
    layout="total, sizes, prev, pager, next, jumper"
    :total="page.totalCount"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script setup lang="ts">
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
  Plus,
  Setting,
  SuccessFilled,
  Refresh,
} from '@element-plus/icons-vue';
import { reactive, ref, onMounted } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus';
const route = useRoute();
const router = useRouter();

const multipleSelection = ref([]);

const handleSelectionChange = (val: any) => {
  multipleSelection.value = val;
};

const page = reactive({
  pageIndex: 1,
  pageSize: 5,
  totalCount: 0,
  pageCount: 0,
});
const typeId:any=route.query.typeId
const tiaozhuan = (id: any) => {

  
   if(typeId==1){
    router.push({
       name:'FemaleRecordView',
    query: {
      id: id,
      typeId:typeId
    },
  });
   }
   else if(typeId==2){
    router.push({
       name:'MaleRecordView',
    query: {
      id: id,
      typeId:typeId
    },
    });
  }
  else{
    router.push({
       name:'ProRecordView',
    query: {
      id: id,
      typeId:typeId
    },
    });
  }
  
};

const handleSizeChange = (val: any) => {
  page.pageSize = val;
  where()
};

const handleCurrentChange = (val: any) => {
  page.pageIndex = val;
  where()
};

const dialogFormVisible = ref(false);

const ruleForm = reactive({
  SerialId: 1,
  farmName: '',
  SheepFarmNick: '',
  sheepFarmNo: '2323',
  Scale: '',
  FarmState: 1,
  ProvinceId: '',
  CityId: '',
  CountyId: '',
  FarmAddress: '',
  BuildingDate: '',
  headID: '',
  DepartmentId: '',
});

const formSize = ref<ComponentSize>('default');
const ruleFormRef = ref<FormInstance>();

const rules = reactive<FormRules>({
  // name: [
  //   { required: true, message: '必填', trigger: 'blur' },
  //   { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
  // ],
  // region: [
  //   {
  //     required: true,
  //     message: 'Please select Activity zone',
  //     trigger: 'change'
  //   }
  // ]
});

// 添加
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      const data = {
        addSheepFarm: {
          serialId: ruleForm.SerialId,
          sheepFarmNo: ruleForm.sheepFarmNo,
          farmName: ruleForm.farmName,
          buildingDate: ruleForm.BuildingDate,
          farmAddress: ruleForm.FarmAddress,
          farmState: ruleForm.FarmState,
          headID: ruleForm.headID,
          departmentId: ruleForm.DepartmentId,
          provinceId: ruleForm.ProvinceId,
          cityId: ruleForm.CityId,
          countyId: ruleForm.CountyId,
          sheepFarmNick: ruleForm.SheepFarmNick,
          scale: ruleForm.Scale,
        },
      };
      axios
        .post('http://localhost:5039/api/SheepFarm/Handle/SheepFarmAdd', data)
        .then((res: any) => {
          if (res.data.code == 1) {
            ElMessage.success('添加成功');
            dialogFormVisible.value = false;
            where();
          }
        });
    } else {
      console.log('error submit!', fields);
    }
  });
};

const tableData = ref([]);

const where = () => {
  axios
    .post('http://localhost:5039/api/SheepFarm/SheepFarmList', {
      farmName: ruleForm.farmName,
      headID: ruleForm.headID || 0,
      pageIndex: page.pageIndex,
      pageSize: page.pageSize,
    })
    .then((res: any) => {
      console.log(res);
      tableData.value = res.data.data.data;
      page.totalCount = res.data.data.totalCount;
      page.pageCount = res.data.data.pageCount;
    });
};

const province: any = ref([]);
const city: any = ref([]);
const county: any = ref([]);

const getprovince = () => {
  
  axios.post('http://localhost:5039/api/Sheep/EnterpriseType').then((res) => {
    province.value = res.data.data;
  });
};

const getcity = () => {
  ruleForm.CityId = '';
  ruleForm.CountyId = '';
  axios
    .post('http://localhost:5039/api/Sheep/EnterpriseType1', {
      provinceId: ruleForm.ProvinceId,
    })
    .then((res) => {
      console.log(res, 2);
      city.value = res.data.data;
    });
};

const getcounty = () => {
  ruleForm.CountyId = '';
  axios
    .post('http://localhost:5039/api/Sheep/EnterpriseType2', {
      cityId: ruleForm.CityId,
    })
    .then((res) => {
      county.value = res.data.data;
    });
};

onMounted(() => {
  where();
  getprovince();
});
</script>

<style scoped></style>
